<template>
  <div class="app-container home">
    <div style="margin: 50px 0 20px 0 "></div>
    <div class="other">
      <el-card class="box-card2">
        <div slot="header" class="clearfix" style="text-align: center">
          <span style="font-size: 20px">营业额数量</span>
        </div>
        <div class="text item">
          <div id="myChart" :style="{width: '660px', height: '300px'}"></div>
        </div>
      </el-card>

      <el-card class="box-card3">
        <div slot="header" class="clearfix" style="text-align: center">
          <span style="font-size: 20px">营业额</span>
        </div>
        <div class="text item">
          <div id="myChart2" :style="{width: '660px', height: '300px'}"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import {revenue,getNum} from "@/api/index";

  export default {
    name: "Index",
    data() {
      return {
        // 遮罩层
        loading: true,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        // 总条数
        total: 0,
      }
    },
    mounted() {
      this.drawLine();
      this.drawLine2();
    },
    methods: {
      drawLine() {
        getNum().then(res => {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('myChart'))
          // 绘制图表
          myChart.setOption({
            xAxis: {
              type: 'category',
              data: ['一月', '二月', '三月', '四月','五月', '六月', '七月', '八月','九月', '十月', '十一月', '十二月'],
              axisLabel:{interval: 0}
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [res.data['01'], res.data['02'], res.data['03'], res.data['04'],res.data['05'], res.data['06'], res.data['07'], res.data['08'],res.data['09'], res.data['10'], res.data['11'], res.data['12']],
                type: 'bar',
                itemStyle: {
                  normal: {
                    // 这里就可以实现，配置柱状图的颜色
                    color: function (params) {
                      var colorList = [ '#ccc', '#c101c1', '#FCCE10', '#E87C25', '#27727B', '#D7504B'];
                      return colorList[params.dataIndex]
                    },
                  }
                },
              }
            ]
          });
        })
      },
      drawLine2() {
        revenue().then(res => {
          // 基于准备好的dom，初始化echarts实例
          let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
          // 绘制图表
          myChart2.setOption({
            xAxis: {
              type: 'category',
              data: ['一月', '二月', '三月', '四月','五月', '六月', '七月', '八月','九月', '十月', '十一月', '十二月'],
              axisLabel:{interval: 0}
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [res.data['01'], res.data['02'], res.data['03'], res.data['04'],res.data['05'], res.data['06'], res.data['07'], res.data['08'],res.data['09'], res.data['10'], res.data['11'], res.data['12']],
                type: 'bar',
                itemStyle: {
                  normal: {
                    // 这里就可以实现，配置柱状图的颜色
                    color: function (params) {
                      var colorList = [ '#ccc', '#c101c1', '#FCCE10', '#E87C25', '#27727B', '#D7504B'];
                      return colorList[params.dataIndex]
                    },
                  }
                },
              }
            ]
          });
        })
      },
    },


  };
</script>

<style scoped lang="scss">
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }
  }

  .other {
    display: flex;
  }

  .box-card2 {
    width: 730px;
  }
  .box-card3 {
    width: 730px;
  }
</style>

